<div class="content-wrapper" style="min-height: 960px;">
    <section class="content-header">
      <h1>
        销售明细表
      </h1>
      <ol class="breadcrumb">
        <li>
          <a [routerLink]="['/main']">
            <i class="fa fa-dashboard"></i>首页
          </a>
        </li>
        <li class="active">
          <a [routerLink]="['/sale/detail/list']">销售明细表</a>
        </li>
      </ol>
    </section>
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <div class="box">
            <!--<div class="box-header">-->
            <!--</div>-->
            <div class="box-body">
              <div id="example1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
                <div class="row">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-6">
                        <div class="form-group" style="width: 100%">
                            <label for="exampleInputExtra" class="col-sm-3 control-label" style="padding-top: 7px;text-align:right">
                                <i class="fa fa-calendar"></i>
                            </label>
                            <div class="col-sm-9">
                                <input id="strategyTimePicker" name="daterange" class="date-picker form-control date-range-input" required="required" type="text" style="width:70%"/>
                                <label class="fa fa-fw fa-search pointer" (click)="search()" style="padding-left: 15px"></label>
                            </div>
                        </div>
                        <!-- <input class="form-control input-sm" type="search" [(ngModel)]="keyword" (keyup.enter)="search()"> -->
                    </div>
                    <div class="col-md-3">
                        <a href="/api/excel/detail?startTime={{startTime}}&endTime={{endTime}}&fileName={{file}}" class="btn btn-info btn-sm" *ngIf="show">导出报表</a>
                    </div>
                </div>
                <div class="row">
                  <div class="col-md-12">
                    <table id="example1" class="table table-bordered table-striped dataTable" [(mfSortOrder)]="sortOrder" [(mfSortBy)]="sortBy"
                           [mfRowsOnPage]="rowsOnPage" [mfData]="details" (mfOnPageChange)="onPageChange($event)"
                           [mfActivePage]="activePage" [mfIsServerPagination]="true" #mf="mfDataTable"
                           [(mfAmountOfRows)]="itemsTotal" (mfSortOrderChange)="onSortOrder($event)" style="border: 1px solid #f4f4f4;">
                      <thead>
                      <tr role="row">
                        <th width="20%">商品名</th>
                        <th width="15%">型号</th>
                        <th width="10%">数量</th>
                        <th width="15%">单价</th>
                        <th width="15%">总额</th>
                        <th width="15%">时间</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr role="row" *ngIf="itemsTotal==0">
                        <td colspan="6" class="no-data-prompt">暂无数据</td>
                      </tr>
                      <tr role="row" *ngFor="let detail of details">
                        <td class="pointer">{{detail.goodName}}</td>
                        <td>{{detail.goodModel}}</td>
                        <td>{{detail.goodNum}}</td>
                        <td>{{detail.price}}</td>
                        <td>{{detail.total}}</td>
                        <td>{{detail.createTime | date: 'yyyy-MM-dd'}}</td>
                      </tr>
                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="6">
                          <mfBootstrapPaginator class="pull-right"></mfBootstrapPaginator>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  
  
  